<template>
  <div>
    <van-nav-bar :title="cinemaInfo.cinemaName"
                 :fixed=true
                 :border=false
                 @click-left="onClickLeft"
                 left-arrow
                 style="height:2.5rem;color: #FFFFFF" />
    <van-cell size="large" />
    <van-cell :title="cinemaInfo.cinemaName" :label="cinemaInfo.cinemaAddress" size="large" />
    <!--  轮播图  -->
    <van-cell size="large">
      <swiper ref="mySwiper"
              @slideChange="onSlideChange"
              @click-slide="handleClickSlide"
              :options="swiperOptions">
        <swiper-slide  v-for="(item, index) in movieShowInfoList" :key="item.movieId" :virtualIndex="index" >
          <img :src="item.picture" width="100px">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </van-cell>


    <van-empty v-if="movieShowInfoList.length===0" description="这里什么都没有" />
    <!--  电影信息  -->
    <div v-else>
      <van-cell   >
        <div style="text-align: center;width: 100%;">
          <span style=";font-size: 16px">{{ currentMovie.movieName }}</span>
          <br>
          <span style="color: #999999">{{ currentMovie.time }}分钟|{{ currentMovie.actor }}</span>
        </div>
      </van-cell>
      <!-- 排片列表-->
      <van-cell style="padding: 0">
        <van-tabs v-model="active" title-active-color="red" line-width="40%" line-height="1px">
          <van-tab :title="getDay('')">
            <van-empty v-if="currentMovie.movieShowMap.today.length===0" description="这里什么都没有" />
            <van-cell-group>
              <van-cell  v-for="ms in currentMovie.movieShowMap.today" :key="ms.movieShowId">
                <van-row align="center" type="flex" justify="space-between">
                  <van-col :span="5">
                    <div style="font-size: 16px;text-align: center;">{{ms.movieShowInfo.startTime|timeFormat}}</div>
                    <div style="text-align: center;color: #999999;font-size: 6px">{{ms.movieShowInfo.endTime|timeFormat}}散场</div>
                  </van-col>
                  <van-col :span="5" >
                    <div style="font-size: 16px;text-align: left;">{{ms.cinemaHallName}}</div>
                    <div style="text-align: left;color: #999999;font-size: 6px">{{currentMovie.language}}</div>
                  </van-col>

                  <van-col :span="5">
                    <div style="color: red;text-align: end">
                      ￥ <span style="font-size: 20px">{{ms.movieShowInfo.oldPrice}}</span>
                    </div>
                  </van-col>
                  <van-col :span="5">
                    <van-button plain hairline type="info" @click="toSelectSeatPage(ms)">购票</van-button>
                  </van-col>
                </van-row>
              </van-cell>
            </van-cell-group>
          </van-tab>

          <van-tab :title="getDay('next')">
            <van-empty v-if="currentMovie.movieShowMap.nextDay.length===0" description="这里什么都没有" />
            <van-cell-group>
              <van-cell  v-for="ms in currentMovie.movieShowMap.nextDay" :key="ms.movieShowId">
                <van-row align="center" type="flex" justify="space-between">
                  <van-col :span="5">
                    <div style="font-size: 16px;text-align: center;">{{ms.movieShowInfo.startTime|timeFormat}}</div>
                    <div style="text-align: center;color: #999999;font-size: 6px">{{ms.movieShowInfo.endTime|timeFormat}}散场</div>
                  </van-col>
                  <van-col :span="5" >
                    <div style="font-size: 16px;text-align: left;">{{ms.cinemaHallName}}</div>
                    <div style="text-align: left;color: #999999;font-size: 6px">{{currentMovie.language}}</div>
                  </van-col>

                  <van-col :span="5">
                    <div style="color: red;text-align: end">
                      ￥ <span style="font-size: 20px">{{ms.movieShowInfo.oldPrice}}</span>
                    </div>
                  </van-col>
                  <van-col :span="5">
                    <van-button plain hairline type="info" @click="toSelectSeatPage(ms)">购票</van-button>
                  </van-col>
                </van-row>
              </van-cell>
            </van-cell-group>
          </van-tab>
        </van-tabs>
      </van-cell>
    </div>
  </div>

</template>

<script>

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import {getMovieShowInfoList} from "@/api/movie";
export default {
  name: "Hall",
  props:['movieId','cinemaId'],
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      active:0,
      cinemaInfo:{},
      movieShowInfoList:[],
      currentMovie:{},
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true //允许分页点击跳转
        },
        slidesPerView: 4,
        spaceBetween: 30,
        centeredSlides: true,
        virtual:true
      }
    }
  },
  methods:{
    toSelectSeatPage(ms){

      if(this.$route.path!=="/seat"){
        let current = this.currentMovie
        delete current.movieShowMap
        current['movieShow'] = ms
        let t = {
          cinemaInfo:this.cinemaInfo,
          currentMovie:current
        }
        this.$store.commit('setCurrentMovie',t)
        this.$router.push(`/seat?msid=${ms.movieShowInfo.movieShowId}&hid=${ms.movieShowInfo.cinemaHallId}&mid=${ms.movieShowInfo.movieId}`)
      }
    },
    // 返回
    onClickLeft () {
      this.$router.back();
    },
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange(swiper) {
      console.log('slide change',swiper);
      this.currentMovie = this.movieShowInfoList[swiper.activeIndex]
    },
    // 点击切换
    handleClickSlide(index){
      //console.log(index)
      this.swiper.slideTo(index, 1000, false)
      this.currentMovie = this.movieShowInfoList[index]
    },
    // slideClick(id){
    //   for (let i of this.movieShowInfoList){
    //     if (i.movieId===id){
    //       this.currentMovie = i
    //       return;
    //     }
    //   }
    // },
    getDay(value){
      let date = new Date()
      if (value==='next'){
        let next = new Date(date.setDate(date.getDate()+1))
        return `明天${next.getMonth()+1}月${next.getDate()}日`
      }
      return `今天${date.getMonth()+1}月${date.getDate()}日`
    },

  },
  computed: {
    swiper() {
      if (typeof (this.$refs.mySwiper)!=='undefined'){
        return this.$refs.mySwiper.$swiper
      }
      return null;
    }
  },
  mounted() {
    console.log(this.movieId,this.cinemaId)
    if (typeof(this.cinemaId)!=='undefined'){
      getMovieShowInfoList({cid:this.cinemaId}).then(res=>{
        //console.log(res)
        this.cinemaInfo = res.data.cinemaInfo
        this.movieShowInfoList = res.data.movieShowInfo
        this.currentMovie = this.movieShowInfoList[0]
      }).catch(err=>{
        this.$toast.fail(err.message)
      })
    }
    console.log('Current Swiper instance object', this.swiper)
    if (this.swiper!==null){
      this.swiper.slideTo(0, 1000, false)
    }
  },
  filters:{
    timeFormat(value){
      return value.substr(0,5)
    }
  }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
  transform: scale(1);
}

</style>
